<template>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        @onCreated="handleCreated"
      />
    </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, watchEffect, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// import { useUserStore } from '@/store/modules/user'
// const userStore = useUserStore()
// const token = userStore.token

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

const toolbarConfig = {}
const editorConfig = { 
  placeholder: '请输入内容...',
  MENU_CONF:{
    uploadImage:{
      fieldName:'file',
        // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 1 * 1024 * 1024, // 1M
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,
      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],
        // 自定义增加 http  header
      // headers: {
      //   'access-token':token
      // },
      server:"/admin/file/upload",
        // 自定义插入图片
      customInsert(res: any, insertFn: any) {
        // TS 语法
        // customInsert(res, insertFn) {                  // JS 语法
        // res 即服务端的返回结果

        // 从 res 中找到 url alt href ，然后插入图片
        insertFn(res.data.filePath)
      }
    }
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const prop = defineProps({
  modelValue:{
      type:String,
      default:""
  }
  })

  const emits = defineEmits<{
      (e:'update:modelValue',value:String):void
  }>()

  watchEffect(()=> {
    valueHtml.value=prop.modelValue
  })
  watch(valueHtml,(newValue)=>{
    emits('update:modelValue',newValue)
  })

</script>